import React from 'react';
import { useState } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react'
import './App.css';
import 'swiper/css';

function App() {
  const [currentIndex, setCurrentIndex] = useState(1);
  const [swiper, setSwiper] = useState(null);

  const click = (index) => {
    swiper.slideTo(index);
    setCurrentIndex(index);
  }

  return (
    <div className="App">
      <div>{currentIndex}</div>
      <button onClick={() => swiper.slidePrev()}>Prev</button>
      <Swiper
        slidesPerView={1}
        loop
        onSlideChange={() => console.log('slide change')}
        onSwiper={(swiper) => setSwiper(swiper)}
      >
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
        <SwiperSlide>Slide 4</SwiperSlide>
      </Swiper>
      <button onClick={() => swiper.slideNext()}>Next</button>

      <div>
        {[1,2,3,4].map(item => (
          <div key={item} onClick={() => click(item)}>{item}</div>
        ))}
      </div>
    </div>
  );
}

export default App;
